<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import VideoUploader from "./VideoUploader.vue";
import CoverUploader from "./CoverUploader.vue";
import FormFields from "./FormFields.vue";
import { publishVideoApi } from "@/api/video";

// 添加组件引用
const videoUploaderRef = ref(null);
const coverUploaderRef = ref(null);

const formData = reactive({
  title: "",
  description: "",
  tags: [],
  videoUrl: "",
  coverUrl: "",
  category: "",
  duration: 0, // 新增视频时长字段
});

const loading = ref(false);
const videoUploaded = ref(false);
const coverUploaded = ref(false);

// 视频上传完成后的回调
const handleVideoUploaded = (url, duration) => {
  formData.videoUrl = url;
  formData.duration = duration; // 保存视频时长
  videoUploaded.value = true;
};

// 封面上传完成后的回调
const handleCoverUploaded = (url) => {
  formData.coverUrl = url;
  coverUploaded.value = true;
};

// 表单字段更新
const handleFormUpdate = (updatedFields) => {
  Object.assign(formData, updatedFields);
};

// 重置所有表单和上传组件
const resetAll = () => {
  // 重置表单数据
  Object.assign(formData, {
    title: "",
    description: "",
    tags: [],
    category: "",
    videoUrl: "",
    coverUrl: "",
    duration: 0, // 重置视频时长
  });



  // 重置上传组件
  if (videoUploaderRef.value && videoUploaderRef.value.reupload) {
    videoUploaderRef.value.reupload();
  }

  if (coverUploaderRef.value && coverUploaderRef.value.reupload) {
    coverUploaderRef.value.reupload();
  }

  // 重置上传状态
  videoUploaded.value = false;
  coverUploaded.value = false;
};

// 发布视频
const publishVideo = async () => {
  if (!formData.videoUrl) {
    return ElMessage.warning("请上传视频文件");
  }

  if (!formData.coverUrl) {
    return ElMessage.warning("请上传视频封面");
  }

  if (!formData.title.trim()) {
    return ElMessage.warning("请填写视频标题");
  }

  try {
    loading.value = true;

    // 数据整理
    const videoData = {
      title: formData.title,
      description: formData.description,
      categoryId: formData.category,
      ossVideoKey: formData.videoUrl,
      ossCoverKey: formData.coverUrl,
      duration: formData.duration, // 添加视频时长
    };

    const res = await publishVideoApi(videoData);
    console.log("视频发布成功:", res);
    ElMessage.success(res.message || "视频发布成功, 请等待审核");

    // 重置所有表单和上传组件
    resetAll();
  } catch (error) {
    console.error("视频发布失败:", error);
    ElMessage.error("视频发布失败，请重试");
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <div class="publish-container">
    <h2 class="section-title">发布视频</h2>

    <div class="upload-section">
      <div class="upload-col">
        <VideoUploader ref="videoUploaderRef" @upload-success="handleVideoUploaded" />
      </div>
      <div class="upload-col">
        <CoverUploader ref="coverUploaderRef" @upload-success="handleCoverUploaded" />
      </div>
    </div>

    <FormFields :form-data="formData" @update="handleFormUpdate" />

    <div class="publish-footer">
      <el-button type="primary" size="large" :loading="loading" @click="publishVideo">
        发布视频
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.publish-container {
  padding: 0 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 24px;
  color: white;
}

.upload-section {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.upload-col {
  flex: 1;
}

.publish-footer {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
</style>
